<template>
  <div class="type">
    <div class="header">
      <van-search disabled @click="onSearch" :left-icon="require('@/assets/img/home/search.png')" v-model="searchValue"
        placeholder="请输入产品名称、品牌、型号、SKU号" />
      <van-tabs v-model="tabactive">
        <van-tab title="分类选型"></van-tab>
        <van-tab title="品牌选型"></van-tab>
      </van-tabs>
    </div>
    <component :is="comList[tabactive]"></component>
  </div>
</template>

<script>
import CateType from "@/components/CateType.vue"
import BrandType from "@/components/BrandType.vue"

export default {
  data() {
    return {
      searchValue: '',
      tabactive: 0,
      comList: ['CateType', 'BrandType'],
    }
  },
  components: {
    CateType, BrandType
  },
  methods: {
    onSearch() {
      this.$router.push({ name: 'search' })
    }
  },
}
</script>

<style lang="less">
.type {
  .header {
    padding-top: 10px;

    .van-search {
      padding: 0px 12px;
      height: 30px;
      white-space: nowrap;

      .van-search__content {
        border-radius: 5px;
        overflow: hidden;
        padding-left: 0px;
        background: #f0f1f3;

        .van-cell {
          padding: 0px;
          display: flex;
          align-items: center;

          .van-field__left-icon {
            margin-right: 0px;

            .van-icon {
              width: 30px;
              height: 30px;
              vertical-align: middle;
              margin-right: 5px;

              .van-icon__image {
                width: 100%;
                height: 100%;
              }
            }
          }

          .van-cell__value {
            .van-field__body {

              .van-field__control:disabled {
                color: #999;
                font-size: 12px;
                cursor: not-allowed;
                opacity: 1;
                letter-spacing: 1px;
                -webkit-text-fill-color: #999;
              }
            }
          }
        }
      }
    }

    .van-tabs {
      .van-tabs__wrap {
        .van-tabs__nav {
          .van-tab--active {
            color: #f74747;
          }

          .van-tabs__line {
            border-radius: 0px;
            width: 56px;
            height: 2px;
          }
        }
      }
    }
  }
}
</style>